<template>
    <div>
        <dv-border-box-10 style="width: 30vw; height: 30vh">
            <div class="content">
                <div class="title">
                    <dv-decoration-3 class="decoration1"/>
                    <h6 style="margin: 0;font-size: 16px;text-align: center;color: white">甄选农品溯源</h6>
                    <dv-decoration-3 class="decoration1"/>
                </div>
                <div class="chart-container">
                    <div class="temper-statistic" id="chart2">
                    </div>
                </div>
            </div>
        </dv-border-box-10>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import * as echarts from "echarts";

const option = ref({
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    shape: 'circle',
    indicator: [
      { name: '土壤温度', max: 6500 },
      { name: '空气温度', max: 16000 },
      { name: '土壤含水率', max: 30000 },
      { name: '空气湿度', max: 38000 },
      { name: '二氧化碳含量', max: 52000 },
      { name: '光照度', max: 25000 }
    ],
      axisLabel: {
          textStyle: {
            color:'#fff'
          }
        }
  },
  series: [
    {
      name: '监测值 vs 标准值',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: '监测值'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: '标准值'
        }
      ]
    }
  ]
});
onMounted(() => {
    const chartDom = document.getElementById('chart2');
    let myChart;
    if (chartDom) {
        myChart = echarts.init(chartDom);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option.value);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
});
</script>

<style scoped>
.content{
    padding-top: 2vh;
}
.title {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.decoration1 {
    width: 12vw;
    height: 2vh;
}
.temper-statistic{
    width: 30vw;
    height: 22vh;
    margin-bottom: 2vh;
}

.chart-container {
    width: 30vw;
    height: 28vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>